<template>
  <view class="container">
	<scroll-view class="sale-list" scroll-y>
		<view v-for="sale in priceCards" :key="priceCards.id" class="sale-item">
			<view class="sale-content">
				<view class="sale-details">
					<text class="sale-title">{{ sale.spotName }}</text><br>
					<text class="sale-info">成人:<text class="price"> ¥{{ sale.adultFee }}</text></text><br>
					<text class="sale-info">老人学生:<text class="price">¥{{ sale.oldStuFee }}</text></text><br>
					<text class="sale-info">儿童(一米三以下):<text class="price"> ¥{{ sale.childrenFee }}</text></text>	
				</view>
				<image class="sale-image" :src="sale.imgUrl.split(' ')[0]" mode="aspectFill" />
			</view>
			<uv-button  class="edit-btn" type="primary" :plain="true" text="点击修改"  @click="editPrice(sale.id)"></uv-button>
			
		</view>
	</scroll-view>
  <uni-popup ref="popup" type="bottom" :mask="true">
      <view class="popup-content">
        <view class="popup-header">
			<text style="color: gray;" @click="closePopup">取消</text>
          <text>修改价格</text>
		   <text style="color: royalblue;" @click="confirmEdit()">确定</text>
        </view>
        <view class="price-inputs">
            <text style="font-weight: bold;">成人票：</text>
            <input type="number" v-model="editingPrices.adultFee" placeholder="请输入"/>
			<text style="font-weight: bold;">老人学生：</text>
			<input type="number" v-model="editingPrices.oldStuFee" placeholder="请输入"/>
			<text style="font-weight: bold;">儿童(一米三以下)：</text>
			<input type="number" v-model="editingPrices.childrenFee" placeholder="请输入" />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {editSalePrice,saleList} from '../../../api/saleManage.js'
export default {
  data() {
    return {
      priceCards: [],
      editingPrices: {
		  adultFee:'',
		  childrenFee:'',
		  id:0,
		  oldStuFee:''
		}
	}
	},
  onLoad() {
  	this.getsaleList();
  },
  // updated() {
  // 	this.getsaleList();
  // },
  methods: {
	  getsaleList(){
		saleList().then(res=>{
			this.priceCards=res.data
		})
	  },
	  //点击修改弹窗
    editPrice(index) {
		this.editingPrices.id=index
		console.log("this.editingPrices.id:"+this.editingPrices.id)
     this.$refs.popup.open('bottom')
    },
	//取消修改
    closePopup() {
      this.$refs.popup.close();
    },
	//确定修改
    confirmEdit() {
	  editSalePrice(this.editingPrices).then(res=>{
		  uni.showToast({
		  	icon: 'success',
		  	title: '修改成功',
		  })
	  }) 
	  this.getsaleList();
	  this.closePopup();
	  
    }
  }
}
</script>

<style scoped>
	.container {
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}		
	.sale-list {
		flex: 1;
		width: 95%;
		padding: 10px;
	}	
	.sale-item {
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		padding: 10px;
		/* border: 1px solid red; */
		overflow:hidden;
		min-height: 15vh;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	
	.sale-content {
		display: flex;
		border-bottom: 1px solid  #e0e0e0;
		padding-bottom: 5px;
		justify-content: space-between;
	}
	.sale-image {
		width: 120px;
		height: 90px;
		/* right: 12px; */
		float: right;
		border-radius: 8px;
	}
	
	.sale-title {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
	}
	
	.sale-info {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
	}
	
	.sale-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		margin-top: 5px;
	}
	.price{
		color: red;
	}
	.edit-btn {
	display: flex;
	font-size: 6px;
	background-color: white;
	margin-top: 10px;
	float: right;
	}
	/* 弹窗 */
	.popup-content {
		height: 450px;
	  background-color: white;
	  border-top-left-radius: 40rpx;
	  border-top-right-radius: 40rpx;
	  padding: 30rpx;
	}

	.popup-header {
	  /* font-size: 32rpx; */
	  font-weight: bold;
	  margin-bottom: 30rpx;
	  display: flex;
	  justify-content: space-between;
	}

	.price-inputs {
		margin-left: 20px;
	  margin-bottom: 30rpx;
	}

	.input-item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	input {
	  width: 85%;
	  height: 80rpx;
	  background-color: whitesmoke;
	  border-radius: 10rpx;
	  padding: 0 20rpx;
	  margin-bottom: 20px;
	  margin-top: 10px;
	}
	.input-item input {
	  width: 200rpx;
	  height: 60rpx;
	  border: 1rpx solid #ccc;
	  border-radius: 6rpx;
	  padding: 0 10rpx;
	}

	.cancel-btn, .confirm-btn {
	  width: 45%;
	  height: 80rpx;
	  line-height: 80rpx;
	  text-align: center;
	  border-radius: 40rpx;
	}

	.cancel-btn {
	  background-color: #f5f5f5;
	  color: #333;
	}

	.confirm-btn {
	  background-color: #007AFF;
	  color: #fff;
	}
</style>